<template>
  <div ref="WangEditor" class="hello"></div>
</template>
<script>
import E from 'wangeditor'

export default {
  name: 'WangEditor',
  props: {
    upload: {
      // 上传方法
      type: Function,
      // (file, insertImgFn) => {}
      default: null,
    },
    uploadCount: {
      // 最多可以上传(图片)的数量
      type: Number,
      default: 3,
    },
    modelValue: '',
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: Number,
      default: 250,
    },
    minWidth: {
      type: Number,
      default: 650,
    },
    minHeight: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      editor: null,
      change: false,
      outChange: false,
    }
  },
  watch: {
    modelValue(newVal) {
      if (!this.change) {
        this.outChange = true
        this.editor.txt.html(newVal)
      }
      this.change = false
    },
  },
  unmounted() {
    this.editor = null
  },
  mounted() {
    this.editor = null
    const editor = new E(this.$refs.WangEditor)
    this.editor = editor
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const $this = this
    editor.config.zIndex = 500
    editor.config.height = this.height
    editor.config.onchange = (html) => {
      this.change = false
      if (!html || html == this.modelValue) {
        return
      }
      if (this.outChange) {
        this.outChange = false
        return
      }
      this.change = true
      this.outChange = false
      this.$emit('update:modelValue', html)
    }
    // editor.config.uploadFileName = "fileInput";
    // //设置header
    // editor.config.uploadImgHeaders = {
    //   Accept: "application/json",
    //   Authorization: this.$store.getters.getToken(),
    // };
    // 上传地址
    editor.config.uploadImgServer = `${ import.meta.env.VITE_BASE_API }/system/notice/uploadImage`
    // // console.log(editor.config.uploadImgServer);
    // editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    //   // 自定义上传
    //   if ($this.upload) {
    //     console.log('调用自定义的上传方法')
    //     console.log(resultFiles)
    //     // resultFiles 是 input 中选中的文件列表
    //     // insertImgFn 是获取图片 url 后，插入到编辑器的方法
    //     // 有可能会上传多张图片,上传多张图片就需要进行遍历
    //     // eslint-disable-next-line array-callback-return
    //     resultFiles.map((item) => {
    //       // _this.getUploadImg(item, insertImgFn);
    //       $this.upload(item, insertImgFn)
    //     })
    //   } else {
    //     const formData = new FormData()
    //     const nameArr = []
    //     resultFiles.forEach((file) => {
    //       formData.append('fileInput', file, file.name)
    //       nameArr.push(file.name)
    //     })
    //     if (!$this.url) {
    //       $this.$message.error('未配置url')
    //       return
    //     }
    //     $this.http.post($this.url, formData, true).then((x) => {
    //       if (!x.status) {
    //         return $this.$message.error(x.message)
    //       }
    //       const imgs = nameArr
    //       .map((m) => $this.http.ipAddress + x.data + m)
    //       .join(',')
    //       insertImgFn(imgs)
    //     })
    //   }
    // }
    editor.create()
    editor.txt.html(this.modelValue)
  },
}
</script>
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>